import util from "@/config/util";

export const genLabels = (labels, onclick, activeIndex = 0) => {

  const getLabel = (label, index) => {
    return {
      type: "group",
      bounding: "raw",
      right: 0,
      top: index * 30,
      width: 60,
      height: 30,
      children: [{
        itemIndex: `${index}`,
        type: "rect",
        right: 0,
        top: 0,
        z: 10,
        shape: {
          width: 60,
          height: 30
        },
        style: {
          fill: activeIndex === index ? "rgba(0,0,0,0.1)" : "rgba(0,0,0,0.3)"
        },
        onclick() {
          if (util.isFunction(onclick)) {
            onclick(index);
          }
        }
      }, {
        type: "text",
        right: "center",
        top: "center",
        z: 10,
        silent: true,
        style: {
          fill: activeIndex === index ? "#409eff" : "#fff",
          text: label,
        }
      }]
    };
  };

  return labels.map((label, index) => getLabel(label, index));
};
